<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <title>表单页面</title>
    <link rel="stylesheet" href="/static/component/pear/css/pear.css" />

    <style>
        .uploadSource_img{
            width:60px;
    height: 60px;
    line-height: 60px;
    margin-right: 10px;
    border: 1px dashed #ededed;
    text-align: center;
    color: #dad9d9;
    float: left;
    position: relative;
    cursor: pointer;
    background: white;
        }
        .bkClass{
            background-color: #000!important;
        }

    </style>
</head>

<body>
    <form class="layui-form" action="" id="formId">
        <div class="mainBox">
            <div class="main-container">
                
                <div class="layui-form-item">
                    <label class="layui-form-label">优势标题</label>
                    <div class="layui-input-block">
                        <input type="text" name="title" value="{$msg.title|default=''}" lay-verify="required"
                            autocomplete="off" placeholder="请输入优势标题" class="layui-input">
                    </div>
                </div>
                <!-- <div class="layui-form-item">
                    <label class="layui-form-label">跳转类型</label>
                    <div class="layui-input-block">
                        <select name="c1" id="SelectStatusid"    lay-filter="SelectStatusid">
                                <option value="0">不跳转</option>
                                <option value="1" {if $msg.c1 == 1}selected{/if}>类目首页</option>
                                <option value="2" {if $msg.c1 == 2}selected{/if}>商品详情页</option>
                                <option value="3" {if $msg.c1 == 3}selected{/if}>自定义链接</option>
                        </select>
                    </div>
                </div> -->
                <!-- <div class="layui-form-item" id="hrefdivId"  {if $msg.c1 == 0}style="display: none;"{/if}>
                    <label class="layui-form-label">跳转值</label>
                    <div class="layui-input-block">
                        <button 
                            type="button" 
                            style="margin-top: 10px;{if $msg.c1 ==3 }display:none;{/if}" 
                            class="tag-item tag-item-warm  layui-btn layui-btn-default layui-btn-xs"
                            id="SelectEId"
                         
                        >已选中|{$msg.c2_title|default=''}</button>
                        <input type="text" name="c2" value="{$msg.c2|default=''}"
                            autocomplete="off" placeholder="请输入自定义链接" id="c2inputId" {if $msg.c1 != 3} style="display: none;" {/if} class="layui-input">
                    </div>
                </div> -->

                <div class="layui-form-item" >
                    <label class="layui-form-label">描述</label>
                    <div class="layui-input-block">
                        <!-- lay-verify="required" -->
                        <textarea name="remark"  autocomplete="off"
                            class="layui-textarea" placeholder="请输入描述">{$msg.remark|default=''}</textarea>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">图片</label>
                    <div class="layui-input-block">

                        <div class="clearfix">
                            <div class="clearfix pull-left"></div>
                            <div class="uploadSource_img" onclick="uploadImg(this)">
                                {if empty($msg.img)}
                                <i class="pear-icon pear-icon-add-bold" style="font-size: 30px;"></i>
                                {else/} 
                                <img src="/static/files/banner/{$msg.img}" style="width:60px;height:60px;">
                                {/if}
                            </div>

                            <input type="file" class="fileUpdate_attrClass" name="img" style="display:none;" id="fileId">
                        </div>
                    </div>

                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">状态</label>
                    <div class="layui-input-block">
                        {php}
                        $status=[
                        0=> empty($msg['status']) ? "checked" : "",
                        1=> empty($msg['status']) ? "" : "checked",
                        ];
                        {/php}
                        <input type="radio" name="status" value="0" title="关闭" {$status[0]}>
                        <input type="radio" name="status" value="1" title="开启" {$status[1]}>
                    </div>
                </div>
            </div>
        </div>
        <div class="bottom">
            <div class="button-container">
                <button type="submit" class="pear-btn pear-btn-primary pear-btn-sm" lay-submit=""
                    lay-filter="form-save">
                    <i class="layui-icon layui-icon-ok"></i>
                    提交
                </button>
                <button type="reset" class="pear-btn pear-btn-sm">
                    <i class="layui-icon layui-icon-refresh"></i>
                    重置
                </button>
            </div>
        </div>
    </form>
    <script src="/static/user/js/jquery.min.js"></script>
    <script src="/static/component/layui/layui.js"></script>
    <script src="/static/component/pear/pear.js"></script>
    <script>
   

   


        layui.use(['form', 'jquery','drawer'], function () {
            let form = layui.form;
            let drawer=layui.drawer;
            let $ = layui.jquery;


            //打开侧边栏模态框- 选择类目或商品
            $("#SelectEId").click(function(){
                
               _r_drawer= drawer.open({
					legacy: false,
					title: [_urltitle, 'font-size:16px;color:#2d8cf0'],
					offset: 'r',
					area: "80%",
					maxmin: false,
					closeBtn: 1,
					iframe: _urlhref
				})
            
            });

            form.on('select(SelectStatusid)',function(data){
                $("#hrefdivId").hide();
                $("#SelectEId").hide();
                $("#c2inputId").hide();
                $("#c2inputId").val("");
                $("#SelectEId").html("+选择跳转值");

                var typeVal=data.value;
                console.log(typeVal);

                if(typeVal!=0){
                    $("#hrefdivId").show(); 
                }
                switch(typeVal){
                    case '1':
                        //类目
                        _urlhref="{:url('banner/bannerclassify')}"
                        _urltitle="选择类目"
                        $("#SelectEId").show();
                    break;
                    case '2':
                        _urlhref="{:url('banner/bannergoods')}"
                        _urltitle="选择商品"
                        $("#SelectEId").show();
                    break;
                    case '3':
                        $("#c2inputId").show();
                    break;
                }
                
            })
            initf('{$msg.c1}');
            function initf(typeVal){
                switch(typeVal){
                    case '1':
                        //类目
                        _urlhref="{:url('banner/bannerclassify')}"
                        _urltitle="选择类目"
                        $("#SelectEId").show();
                    break;
                    case '2':
                        _urlhref="{:url('banner/bannergoods')}"
                        _urltitle="选择商品"
                        $("#SelectEId").show();
                    break;
                    case '3':
                        $("#c2inputId").show();
                    break;
                }
            }

            form.on('submit(form-save)', function (data) {
                //var data = data.field ;//JSON.stringify(data.field);
                var data = $("#formId");
                var url = "{:url('banner/bannerSave')}?id={$Request.get.id}";
         
                postDatai(url, data).then(function (res) {
                    if (res.code == 200) {
                        layer.msg(res.message, {
                            icon: 1,
                            time: 1000
                        }, function () {
                            parent.layer.close(parent.layer.getFrameIndex(window
                                .name)); //关闭当前页
                            parent.layui.table.reload("tableId");
                        });
                    } else {
                        layer.msg(res.message, {
                            icon: 2,
                            time: 1000
                        });
                    }
                });
                return false;
            });





        })
        // 规格图上传

        function uploadImg(item) {
            $(item).next(".fileUpdate_attrClass").click();
        };
        $("body").on("change", ".fileUpdate_attrClass", function () {
            if ($(this).val()) {

                var imgurl = getObjectURL(this.files[0]);
                $(this).prev(".uploadSource_img").html(`
                        <img src="${imgurl}" style="width:60px;height:60px;">
                    `);
            }
        });
    </script>
    <script>
        //c2inputId  SelectStatusid  SelectEId  //hrefdivId

        //--提供子窗口调用的方法
        function CallParent(id,title){
            $("#c2inputId").val(id);
            $("#SelectEId").html("已选中|"+title);
            layer.close(_r_drawer) 
        }
  


    </script>

    {include file="base/unitjs"}
</body>

</html>